<template>
  <div class="hello">
    <el-container class="bigbox">
      
      <Navmen class="asidebox" :isCollapse = "isCollapse" ></Navmen>
      <el-container>
        <el-header style="height:50px">
          <el-row>
            <!--<el-col :span="22"> 
              <el-button @click="chckfun" style="padding:2px"><i class="el-icon-menu"></i></el-button>
            </el-col> -->
            <el-col :span="24" style="text-align:right;">
              <span style="padding-right:20px;">账号：{{userName}} </span>
              <el-button class="addBtn" @click="loginOut">退出</el-button>
            </el-col>
          </el-row>
        </el-header>
        <el-main id="centerbox">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import Navmen from './Navmen'
import Http from '@/Http/Http'
import {mapActions,mapGetters,mapState} from 'vuex'

export default {
  name: 'HelloWorld',
  components: {
    Navmen
  },
  data () {
    return {
      isCollapse:false,
      userName:'',
    }
  },
  created(){
    this.userName = sessionStorage.getItem('userName')
    
  },
  
  mounted(){
    
  },
  computed:{
    
  },
  methods:{
    chckfun() {
      this.isCollapse = !this.isCollapse
    },
    loginOut() {
      Http.loginOut()
      .then( res => {
        sessionStorage.clear()
        this.$role = '',
        this.$router.push('/')
      })
      .catch( error => {
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header, .el-footer {
    color: #333;
    line-height: 50px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    line-height: 200px;
  }
  
  .el-main {
    border:10px solid #f2f2f2;
    padding:10px;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  } 
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
 .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .bigbox{
    height: 100vh;
  }
</style>
